<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	
	
	
	<body>
		
		
		<div  id="app">
			<home></home>
			<!-- <dog></dog> -->
		</div>
		
	    
		
	   <template id="dogTemp">
			<div>
			   <h1>{{name}}</h1>
			</div>
		</template>
		
		
		<template  id="homeTemp">
			<div>
			  <h1>{{name}}</h1>
			  <dog></dog>
			</div>
		</template>
	
	
	
	
		<script  src="../js/vue.js"></script>
		<script>
			
			
			let  dog={
				data(){
					return  {
						name: "我是哈士奇"
					}
				},
				template: "#dogTemp"
			}
			
			
			
			let  home={
				data(){
					return  {
						name: "我是家"
					}
				},
				template: "#homeTemp",
				components: {
					dog
				}
			}
		
			
			const  app=new Vue({
				el: "#app",
				components: {
					home,
					dog
				}
			})
			
			
		</script>
		
		
		
		
	</body>
</html>
